<template>
  <div>
    <el-card>
      <CategorySelector @categoryChange="handleCategoryChange" :disabled="!isShowList"></CategorySelector>
    </el-card>

    <el-card>
      <div v-show="isShowList">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="showAdd">添加属性</el-button>
        <el-table
          border
          :data="attrList"
          row-key="id">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center">
          </el-table-column>

          <el-table-column
            prop="attrName"
            label="属性名称">
          </el-table-column>



          <el-table-column
            label="属性值列表">
            <template v-slot="{row, $index}">
              <el-tag style="margin-left: 5px;" type="info" v-for="item in row.attrValueList" :key="item.id">{{item.valueName}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="150">
            <template v-slot="{row, $index}">
              <hint-button title="修改属性" type="primary" icon="el-icon-edit" size="small" @click="showUpdate(row)"></hint-button>
              <el-popconfirm
                title="确定删除吗?"
                @onConfirm="remove(row.id)">
                <hint-button slot="reference" title="删除属性" type="danger" icon="el-icon-delete" size="small"></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="!isShowList">
        <el-form inline>
          <el-form-item label="属性名">
            <el-input v-model="attr.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addAttrValue">添加属性值</el-button>
        <el-button @click="isShowList=true">取消</el-button>

        <el-table
          style="width: 80%; margin: 20px 0"
          :data="attr.attrValueList">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center">
          </el-table-column>
          <el-table-column
            label="属性值名称">
            <template v-slot="{row, $index}">
              <el-input :ref="$index" v-if="row.edit" v-model="row.valueName" 
                placeholder="属性值名称" @blur="toList(row, $index)" 
                  @keyup.enter.native="toList(row, $index)"></el-input>
              <span style="display: inline-block;width: 100%" v-else 
                @click="toEdit(row, $index)">{{row.valueName}}</span>
            </template>
          </el-table-column>



          <el-table-column
            label="操作">
            <template v-slot="{row, $index}">
              <el-popconfirm
                :title="`确定删除${row.valueName}吗?`"
                @onConfirm="attr.attrValueList.splice($index, 1)"
              >
                <hint-button slot="reference" title="删除" type="danger" icon="el-icon-delete" size="small"></hint-button>
              </el-popconfirm>
             
            </template>
          </el-table-column>
        </el-table>

        <el-button type="primary" @click="addOrUpdate">保存</el-button>
        <el-button @click="isShowList=true">取消</el-button>

      </div>
    </el-card>
  </div>
</template>

<script>
/* 
{
      "id": 2574,
      "attrName": "选择颜色",
      "categoryId": 61,
      "categoryLevel": 3,
      "attrValueList": [
        {
          "id": 6869,
          "valueName": "黑",
          "attrId": 2574
        },
        {
          "id": 6871,
          "valueName": "黄",
          "attrId": 2574
        },
        {
          "id": 6868,
          "valueName": "白",
          "attrId": 2574
        },
        {
          "id": 6870,
          "valueName": "绿",
          "attrId": 2574
        }
      ]
    },
*/
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'AttrList',

  data () {
    return {
      category1Id: null, // 一级分类ID
      category2Id: null,  // 二级分类ID
      category3Id: null,  // 三级分类ID
      attrList: [], // 属性列表
      isShowList: true, // 是显示列表还显示添加/更新的页面 
      attr: { // 要添加/修改属性信息对象
        categoryLevel: 3,
        categoryId: '',
        attrName: '', // 属性名称
        attrValueList: [], // 属性值列表
      },

      // edit: true, 
    }
  },

  async mounted () {
    // const result = await this.$API.attr.getList(2, 13, 61)
    // console.log(result)
    // 方便测试
    // this.category1Id = 2
    // this.category2Id = 13
    // this.category3Id = 61
    // this.getAttrList()
  },

  methods: {

    /* 
    删除指定平台属性
    */
    async remove (id) {
      await this.$API.attr.remove(id)
      this.$message.success('删除成功')
      this.getAttrList()
    },

    /* 
    请求添加/更新平台属性
    */
    async addOrUpdate () {
      // 请求添加/更新
      const {attr} = this

      /* 在发请求前, 对要提交的数据进行特定处理/整理操作 */
      /* 1. 过滤掉属性值列表中属性值名称为空串的属性值对象 */
      /* 2. 把属性值对象中的edit属性删除 */
      /* 
        [
          {
            "id": 6869,
            "valueName": "黑",
            "attrId": 2574,
            edit: false
          },
        ]
      */
      attr.attrValueList = attr.attrValueList.filter(item => {
        if (item.valueName) {
          delete item.edit // 不会再提交多余的edit数据
          return true
        }
        return false // 不提交没有属性值名称的属性值对象
      })



      await this.$API.attr.save(attr)
      // 请求成功后处理
      this.isShowList = true
      this.$message.success('保存属性成功')
      this.getAttrList()
    },

    /* 
    添加属性值
    */
    addAttrValue () {
      // 在属性值列表最后添加一个属性值对象
      this.attr.attrValueList.push({
        valueName: '',
        attrId: this.attr.id,
        edit: true  // 默认就是编辑模式
      })
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs[this.attr.attrValueList.length-1].focus()
      })
    },

    /* 
    将指定行变为查看模式
     */
    toList (row, index) {
      if (!row.edit) return   // 防止响应2个事件重复调用
      console.log('toList', index, row.edit)
      // 没有输入
      if (row.valueName==='') {
        // this.$message.warning('必须输入')
        // 自动获取焦点 ==> 必须等到界面更新(input显示)后  ==> $nextTick()
        this.$nextTick(() => {
          if (index<this.attr.attrValueList.length) { // 只有当下标在在效范围内才处理
            this.$refs[index].focus()
          }
        })
        return
      }

      // 输入重复了  row.valueName   a
      const isRepeat = this.attr.attrValueList.filter(item => item.valueName===row.valueName).length===2
      // const isRepeat = this.attr.attrValueList.reduce((pre, item) => pre + (item.valueName===row.valueName ? 1 : 0), 0)===2
      if (isRepeat) {
        this.$message.warning('不能重复')
        // 自动获取焦点 ==> 必须等到界面更新(input显示)后  ==> $nextTick()
        this.$nextTick(() => this.$refs[index].focus())
        return
      }

      row.edit = false
    },

    /* 
    将指定行变为编辑模式
    */
    toEdit (row, index) {
      /* 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新 */
      // 给一个响应式对象添加一个新属性, 如果直接添加不是响应式的
      // 如何添加才是响应式?  

      // 如果row中有edit, 直接修改为true
      if (row.hasOwnProperty('edit')) {
        row.edit = true
      } else {
        // 如果row中没有edit, 必须通过$set来添加, 并指定为true
        this.$set(row, 'edit', true)
      }

      // 自动获取焦点 ==> 必须等到界面更新(input显示)后  ==> $nextTick()
      this.$nextTick(() => this.$refs[index].focus())
    },

    /* 
    显示修改界面
    */
    showUpdate (row) {
      // 保存指定的属性对象
      // this.attr = row  // 问题: 修改属性名称不能取消
      // this.attr = {...row} // 对row进行浅拷贝 ==> 问题: 属性值修改不能取消
      // this.attr = JSON.parse(JSON.stringify(row)) // 对row进行深拷贝
      this.attr = cloneDeep(row) // 也可以
      // 显示修改界面
      this.isShowList=false
    },

    /* 
    显示添加界面
    */
    showAdd () {
      // 重置attr
      this.attr = {
        attrName: '', // 属性名称
        attrValueList: [], // 属性值列表
        categoryId: this.category3Id, // 3级分类的ID
        categoryLevel: 3, // 第3级的分类
      }

      // 显示添加界面
      this.isShowList=false
    },


    handleCategoryChange ({categoryId, level}) {
      console.log('handleCategoryChange', categoryId, level)
      if (level===1) {
        // 清除二三级分类ID和属性列表
        this.category2Id = null
        this.category3Id = null
        this.attrList = []
        this.category1Id = categoryId
      } else if (level===2) {
        // 清除三级分类ID和属性列表
        this.category3Id = null
        this.attrList = []
        this.category2Id = categoryId
      } else {
        this.category3Id = categoryId
        this.getAttrList()
      }
    },

    /* 
    请求获取当前分类的平台属性列表显示
    */
    async getAttrList () {
      const {category1Id, category2Id, category3Id} = this
      const result = await this.$API.attr.getList(category1Id, category2Id, category3Id)
      this.attrList = result.data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
